<div class="element-jsonform page-layout card fullwidth">
    <div class="header center">
        <h1 class="mt-32">Demonstration Playground</h1>
        <div class="header-content">
            <span class="menu-label">Current example:</span>
            <button mat-raised-button
                    color="accent"
                    [matMenuTriggerFor]="exampleMenu">
                {{selectedSetName}} {{selectedExampleName}} <mat-icon>arrow_drop_down</mat-icon>
            </button>
            <mat-menu #exampleMenu="matMenu" class="example-menu">
                <button mat-menu-item class="mat-medium"
                        *ngFor="let example of examples['ng-jsf'].schemas"
                        (click)="loadSelectedExample('ng-jsf', '', example.file, example.name)">
                    {{example.name}}
                </button>
                <button mat-menu-item class="mat-medium" [matMenuTriggerFor]="asfMenu">
                    <span>Angular Schema Form (AngularJS) examples</span>
                </button>
                <mat-menu #asfMenu="matMenu" class="example-menu">
                    <button mat-menu-item class="mat-medium"
                            *ngFor="let example of examples.asf.schemas"
                            (click)="loadSelectedExample('asf', 'Angular Schema Form:', example.file, example.name)">
                        {{example.name}}
                    </button>
                </mat-menu>
                <button mat-menu-item class="mat-medium" [matMenuTriggerFor]="rjsfMenu">
                    <span>React JSON Schema Form examples</span>
                </button>
                <mat-menu #rjsfMenu="matMenu" class="example-menu">
                    <button mat-menu-item class="mat-medium"
                            *ngFor="let example of examples.rjsf.schemas"
                            (click)="loadSelectedExample('rjsf', 'React JSON Schema Form:', example.file, example.name)">
                        {{example.name}}
                    </button>
                </mat-menu>
                <button mat-menu-item class="mat-medium" [matMenuTriggerFor]="jsfMenu">
                    <span>JSONForm (jQuery) examples</span>
                </button>
                <mat-menu #jsfMenu="matMenu" class="example-menu">
                    <button mat-menu-item class="mat-medium"
                            *ngFor="let example of examples.jsf.schemas"
                            (click)="loadSelectedExample('jsf', 'JSONForm:', example.file, example.name)">
                        {{example.name}}
                    </button>
                </mat-menu>
            </mat-menu>
        </div>
    </div>

    <div class="content center mb-32" fxLayout="row" fxLayoutAlign="space-around start"
        fxLayout.lt-sm="column" fxLayoutAlign.lt-sm="flex-start center">

        <mat-card fxFlex="0 0 calc(50% - 12px)">
            <h4 class="default-cursor" (click)="toggleVisible('options')">
                {{visible.options ? '▼' : '▶'}} Selected Options
            </h4>
            <div *ngIf="visible.options" fxLayout="column" [@expandSection]="true">
                <div class="check-row">
                    <mat-checkbox color="primary" [(ngModel)]="jsonFormOptions.returnEmptyFields">
                        Return empty fields?
                    </mat-checkbox>
                    (default = true)
                </div>
                <div class="check-row">
                    <mat-checkbox color="primary" [(ngModel)]="jsonFormOptions.addSubmit">
                        Add submit button?
                    </mat-checkbox>
                    (default = only add if no layout is defined)
                </div>
                <div class="check-row">
                    <mat-checkbox color="primary" [(ngModel)]="jsonFormOptions.defautWidgetOptions.feedback">
                        Show inline fedback?
                    </mat-checkbox>
                    (default = false)
                </div>
                <div class="check-row">
                    <mat-checkbox color="primary" [(ngModel)]="jsonFormOptions.debug">
                        Show debuging information?
                    </mat-checkbox>
                    (default = false)
                </div>
            </div>
            <hr>
            <h4 class="default-cursor" (click)="toggleVisible('schema')">
                {{visible.schema ? '▼' : '▶'}} Input JSON Schema and Form Layout
            </h4>
            <div *ngIf="visible.schema" [@expandSection]="true"
                aceEditor
                [text]="jsonFormSchema"
                [options]="aceEditorOptions"
                [readOnly]="false"
                [autoUpdateContent]="true"
                (textChanged)="generateForm($event)"
                style="width:100%; overflow: auto; border: 1px solid black;">
                (loading form specification...)
            </div>
        </mat-card>

        <mat-card fxFlex="0 0 calc(50% - 12px)">
            <h4 class="default-cursor" (click)="toggleVisible('form')">
                {{visible.form ? '▼' : '▶'}} Generated Form
            </h4>
            <div *ngIf="visible.form" class="json-schema-form" [@expandSection]="true">
                <div *ngIf="!formActive">{{jsonFormStatusMessage}}</div>

                <!-- This is the form! -->
                <json-schema-form
                    *ngIf="formActive"
                    loadExternalAssets="true"
                    [form]="jsonFormObject"
                    [options]="jsonFormOptions"
                    [framework]="selectedFramework"
                    [language]="selectedLanguage"
                    (onChanges)="onChanges($event)"
                    (onSubmit)="onSubmit($event)"
                    (isValid)="isValid($event)"
                    (validationErrors)="validationErrors($event)">
                </json-schema-form>

            </div>
            <hr>
            <h4 class="default-cursor" (click)="toggleVisible('output')">
                {{visible.output ? '▼' : '▶'}} Form Output
            </h4>
            <div *ngIf="visible.output" fxLayout="column" [@expandSection]="true">
                <div>
                    Valid?:
                    <strong *ngIf="formIsValid || prettyValidationErrors"
                            [class.text-success]="formIsValid"
                            [class.text-danger]="!formIsValid">
                        {{formIsValid ? 'Yes' : 'No'}}
                    </strong>
                    <span *ngIf="!formIsValid && !prettyValidationErrors">n/a</span>
                    <span *ngIf="prettyValidationErrors">— errors from validationErrors():</span>
                    <div *ngIf="prettyValidationErrors"
                        class="data-bad"
                        [innerHTML]="prettyValidationErrors"></div>
                </div><br>
                <div>
                    Live data — from onChanges():
                    <pre
                        [class.data-good]="!prettyValidationErrors && prettyLiveFormData !== '{}'"
                        [class.data-bad]="prettyValidationErrors">{{prettyLiveFormData}}</pre>
                </div><br>
                <div>
                    Submitted data — from onSubmit():
                    <pre [class.data-good]="prettySubmittedFormData !== 'null'">{{prettySubmittedFormData}}</pre>
                </div>
            </div>
        </mat-card>

    </div>
</div>
